import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

import { NzUploadChangeParam } from 'ng-zorro-antd/upload';
import { NzUploadFile } from 'ng-zorro-antd/upload';

const getBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

@Component({
  selector: 'app-slider-label',
  templateUrl: './slider-label.component.html',
  styleUrls: ['./slider-label.component.less']
})
export class SliderLabelComponent {
  constructor(
    private message: NzMessageService,
    private msg: NzMessageService
  ) { }

  InitialData = JSON.stringify({
    forceLimit: 30,
    contactForce: 10,
    sensitivity: 50,
  });

  settingConfig = {
    forceLimit: 30,
    contactForce: 10,
    sensitivity: 50,
  };

  visible = false;

  open(): void {

    this.visible = true;
  }

  close(): void {
    this.settingConfig = JSON.parse(this.InitialData);
    this.visible = false;
  }

  settingCommandConfig() {
    console.log('点击了确定');
    this.InitialData = JSON.stringify(this.settingConfig);
    this.message.success('修改成功')
  }

  handleLog() {
    console.log(this.settingConfig, 'this.settingConfig');
    console.log(this.InitialData, 'this.InitialData');
  }

  handleOff() {
    this.settingConfig = JSON.parse(this.InitialData);
  }

  // 上传
  fileList: NzUploadFile[] = [
    // {
    //   uid: '-1',
    //   name: 'image.png',
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    // },
    // {
    //   uid: '-2',
    //   name: 'image.png',
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    // },
    // {
    //   uid: '-3',
    //   name: 'image.png',
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    // },
    // {
    //   uid: '-4',
    //   name: 'image.png',
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    // },
    // {
    //   uid: '-xxx',
    //   percent: 50,
    //   name: 'image.png',
    //   status: 'uploading',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    // },
    // {
    //   uid: '-5',
    //   name: 'image.png',
    //   status: 'error'
    // }
  ];


  /**
   *文件状态：status
   status: 'done',
   status: 'uploading',
   status: 'error'
   */
  handleChange(info: NzUploadChangeParam): void {
    // this.msg.success('上传测试')
    if (info.file.status !== 'uploading') {
      // console.log(info.file, 'info.file');

      // 
      let fileList = [...info.fileList];

      // 1. Limit the number of uploaded files
      // Only to show two recent uploaded files, and old ones will be replaced by the new
      // fileList = fileList.slice(-2);

      // 2. Read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.data;
          file.name = file.name.split('.')[0];
          // 将code转换为status: 过滤图片格式
          if (file.response.code !== 0) {
            file.status = 'error';
            file.thumbUrl = '';
            file.name = '上传错误'
          }
        }
        return file;
      });

      this.fileList = fileList;

      console.log(info.fileList, 'info.fileList');
    }
    // if (info.file.status === 'done') {
    //   this.msg.success(`${info.file.name} file uploaded successfully`);
    //   console.log('this.msg.success');

    // } else if (info.file.status === 'error') {
    //   this.msg.error(`${info.file.name} file upload failed.`);
    //   console.log('this.msg.error');
    // }
  }


  str = '背景01.png'


  xxximg: string = 'https://test.dingsing-medical.com/download/app/202404111447313ecbf3d6e2904beb8aecd1955d1563ca.png'
  fallback = '';

  xxx() {
    // console.log(this.fileList.length);
    console.log(this.fileList);
    let xxx = this.str.split('.')
    console.log(xxx);

  }

  inputValue: string = '';

}
